<style>
.figure {
  float: left;
  padding-right: 20px;
}

.figcaption {
  display: none;
}

.figure:hover .figcaption {
  display: block;
}
</style>

<div class="example">
  <h3>Hovers</h3>
  <p>Hover over the image for additional information</p>
  <% 3.times do |count| %>
  <div class="figure">
    <img src="/img/avatar-blank.jpg" alt="User Avatar">
    <div class="figcaption">
      <h5>name: user<%= count+1 %></h5>
      <a href="/users/<%= count+1 %>">View profile</a>
    </div>
  </div>
  <% end %>
</div>
